<template>
  <div class="content">
    <!--    用户部门分组列表弹窗-->
    <el-dialog
      v-dialogDrag
      title="角色权限列表"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      :before-close="handleClose"
    >
      <div class="header">
        <div class="header-name">
          <search
            :options="selectData"
            :msg="tacitly"
            @seek="collect"
            @hand="searchMaterialList"
          />
          <el-button size="mini" type="primary" class="btn" @click="searchMaterialList">
            {{ $t('btn.search') }}
          </el-button>
        </div>
      </div>
      <div class="table-content">
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="500px"
          serial
          @clickRow="clickRow"
        />
      </div>
      <div class="footer">
        <jc-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="size"
          @pagination="getUserList"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import searData from '@/components/Search/mixin'
import { queryTJxRoleList } from '@/api/basicManagement/userslist'
import search from '@/components/Search'

export default {
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      // 客户列表数据分页
      isclientlDialog: true,
      ftype: 27,
      fbillNo: 'fname',
      total: 0, // 总条目
      pageNum: 1, // 当前页
      size: 200, // 每页显示多少条数据
      tableData: [], // 列表数据
      // 表头数据
      tableHeader: [
        { label: this.$t('market.roleName'), prop: 'name' },
        { label: this.$t('market.rolexplain'), prop: 'depict' },
        { label: this.$t('market.forbidStatu'), prop: 'isdisable' },
        { label: this.$t('market.createDate'), prop: 'createDate' }
      ]
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 角色权限列表
    async getUserList() {
      const DATA = {
        pageNum: this.pageNum,
        pageSize: this.size,
        search: this.searCollData
      }
      const { data: res } = await queryTJxRoleList(DATA)
      this.tableData = res.array
      this.total = res.total
    },
    // 搜索物料
    searchMaterialList() {
      this.pageNum = 1
      this.getUserList()
    },
    // 确定
    clickRow(item) {
      this.$emit('rule', item)
    },
    // 关闭前回调
    handleClose() {
      const item = {
        fpkId: ''
      }
      this.$emit('rule', item)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  .header {
    position: relative;
    .header-name {
      width: 100%;
    }
    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
}
</style>
